<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/top-cav.css">
    <!-- layui -->
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">  
	<script src="../jquery/jquery.min.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>
    <style>
        .log-background{
            margin-top: 90px;
            margin-left: 400px;
            border: 1px solid white;
            width: 700px;
            padding-left: 80px;
            height: 450px;
            background-color: white;
            border-radius: 10px;
            padding-left: 0px;
        }
        a{
            color: black;
            text-decoration: none;
        }
        .log-log-register{
            width: 270px;
            height: 445px;
            float:right;
           
        }
        .log_buttom{
            width: 1536px;
            height: 170px;
            
            background-color: #D72A3A;
         
       }
       .log-logo{

            width: 200px;
            height: 200px;
            float: left;
            background-image: url(image/picwish.png);
            background-size: 100%;
            margin-top: 10px;
            margin-left: 140px;
       }
       .log-buttom-icon{
            float: left;
       }
       .buttom_nav{
            width: 1536px;
            height: 700px;
            background-color: #3b3d42;
       }
       .buttom_nav_center{
        width: 1140px;
        height: 700px;
        
        margin-left: 180px;
       }

       .buttom_nav_center div{
          
            width: 1140px;
            height: 40px;
       }
       .buttom_nav_center div .title{
            color: white;
            font-size: 18px;
            height: 30px;
            float: left;
            color: #aaacb3;
            font-weight: bold;
       }
       .recommend-content{
            float: left;
            margin-top: 10px;
            
       }
       .recommend-content span a{
            font-size: 17px;
            text-decoration: none;
            color: #8b8d92;
            margin-right: 20px;
       }
       .recommend-content span a:hover{
            color: white;
       }
     
       #about-suleju{
           
            height: 300px;
            margin-top: 26px;
       }
       #max-buttom-info{
            height: 70px;
        
            margin-top: 210px;
            
            
       }
       #suleju-web-info{
            font-size: 17px;
            text-decoration: none;
            color: #8b8d92;
           
        
       }
       #suleju-web-info div{
            float: left;   
       }
       #suleju-web-info a{
            float: left;
            text-decoration: none;
            color: #8b8d92;
       }
       #suleju-web-info a:hover{
            color: white;
       }
    </style>
</head>
<body>
    <div class="max-frame" >
        <!-- 顶部导航栏 -->
        <div class="top-navi">
            <div class="logo-div">
                <a class="logo1" href="frontpage.html">
                    <!-- logo的图片 -->
                    <img src="image/logo1.png" width="100px" height="76px" alt="无图片">
                </a>
            </div>
            <div class="region">
                
                <!-- 选择城市的页面 -->
                <a href="search.html">
                    <span class="region-pic"></span>
                    <span style="display: block;float: left;padding-top: 8px;font-weight: bold;">吴中区</span>

                </a> 
            </div>
            <div class="cen-navi">
           
                <ul class="layui-nav"  lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="" style="color: black;">首页</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=0" style="color: black;">合租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=1" style="color: black;">整租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html" style="color: black;">分类</a></li>
                    <li class="layui-nav-item"><a href="manager.html"style="color: black;">经纪人登录</a></li>
                    <li class="layui-nav-item"><a href="javascript:void(0)" style="color: black;" onclick="release()">发布房源</a></li>
                  </ul>
                   
                  <script>
                  //注意：导航 依赖 element 模块，否则无法进行功能性操作
                  layui.use('element', function(){
                    var element = layui.element;
                    //…
                  });
                  </script>
            </div>
            <div class="log-register-button">
                <div class="log-register">
                    <a href="#" style="font-weight: bold;">
                        <img src="image/icon_people_black.png" style="float: left; margin-right: 5px;" alt="">
                        登录
                    </a>
                </div>
                <div style="float: left;margin-left: 10px;">|</div>
                <div class="log-register">
                    <a href="registerpage.html">
                        <div style="margin-top: 1px;font-weight: bold;">注册</div>
                    </a> 
                </div>
            </div>
            
        </div>
        <div class="log-background">
            
            <div style="width: 400px;padding-left: 80px;float: left;border-right: 1px dashed rgb(237, 237, 237);">
                <div class="layui-tab layui-tab-brief"  lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="margin-top: 60px;width:280px;">
                      <li >手机号登录</li>
                      
                      <li>密码登录</li>
                      <li class="layui-this">邮箱登录</li>
                    </ul>
                    <div class="layui-tab-content ">
                        <div class="layui-tab-item">
                                <!-- 手机号登录 -->
                                <form class="form-horizontal" style="margin-top: 30px;" role="form" id="phone_log_form" name="phone_log_form">
                                    <div class="form-group">
                                      <div class="col-sm-9">
                                        <input type="text" onblur="phoneHide()" class="form-control" id="inputphone" name="inputphone" placeholder="请输入手机号码" >
                                      </div>
                                      <script>
                                        function phoneHide(){
                                            var phoneValue = document.getElementById("inputPassword").value;
                                            var flag = checkphone(phoneValue);
                                            if(flag) {
                                                return true;
                                            } else {
                                                
                                                layer.msg("手机号码格式不正确")
                                                return false;
                                            }
                                        }
                                        function checkphone(strEmail) {      
                                            var emailReg = /^[1][345678][0-9]{9}$/;
                                            
                                            if ( emailReg.test(strEmail) ) {
                                                return true;
                                            }
                                            else {
                                                return false;
                                            }
                                        };
                                      </script>
                                    </div>
                                    <div class="form-group" style="margin-top: 30px;">
                                        <div class="col-sm-5" >
                                          <input type="password" class="form-control" id="phonecode" name="phonecode" placeholder="验证码">
                                        </div>
                                        <input id="btnSendCode" type="button" class="layui-btn layui-btn-radius" onclick="send_phone_checkcode(this);" style="border:1px solid #ee3843;color: #ee3843;background-color: white;" value="发送验证码" />
                                    </div>
                                    <input type="checkbox" style="float: left;" name="" id="" title="请记住我" lay-skin="primary">
                                    <span style="display:block;float: left; margin-bottom:2px;height: 20px;margin-left: 5px;">请记住我</span>
                                    <button type="button" class="layui-btn  layui-btn-lg layui-btn-radius" onclick="phonelogbutton()" style="margin-top: 60px;margin-left: -20px;border:1px solid red;color: red;background-color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                </form>
                        </div>
                        <div class="layui-tab-item">
                                <!-- 账号密码登录 -->
                                <form class="form-horizontal" style="margin-top: 30px;" role="form" id="form_account" name="form_account">
                                    <div class="form-group">
                                      <div class="col-sm-9">
                                        <input type="text" class="form-control" id="username"  name="username" placeholder="请输入账号">
                                      </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-9">
                                          <input type="password" onblur="passwordHide()" class="form-control" id="password" name="password" placeholder="请输入密码">
                                        </div>
                                      </div>
                                    <input type="checkbox" style="float: left;" name="rememberMe"  id="rememberMe" title="请记住我" lay-skin="primary">
                                    <span style="display:block;float: left; margin-bottom:2px;height: 20px;margin-left: 5px;">请记住我</span>
                                    <button type="button" class="layui-btn  layui-btn-lg layui-btn-radius" onclick="accountbutton()" style="margin-top: 60px;margin-left: -20px;border:1px solid red;color: red;background-color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                </form>
                                <script>
                                    function passwordHide(){
                                        var passwordValue = document.getElementById("inputPassword1").value;
                                        var flag = checkPassword(passwordValue);
                                        
                                        if(flag) {
                                            return true;
                                        } else {
                                            
                                            layer.msg("密码格式不正确")
                                            return false;
                                        }
                                    }
                                    function checkPassword(strEmail) {      
                                        var emailReg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,18}$/;//1.密码必须由字母、数字组成，区分大小写,2.密码长度为6-18位
                                        if (emailReg.test(strEmail) ) {
                                            return true;
                                        }
                                        else {
                                            return false;
                                        }
                                    };
                                </script>
                        </div>
                        <div class="layui-tab-item layui-show">
                            <form id="email_log_form" class="form-horizontal"  style="margin-top: 30px;" role="form">
                                <div class="form-group">
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control"  onblur="emailHide()"name="inputemail"  id="inputemail" placeholder="请输入邮箱">
                                    <span id="email_hint" style="color: red;"></span>
                                </div>
                                </div>
                                <script>
                                    function emailHide(){
                                        var emailValue = document.getElementById("inputemail").value;
                                        var email_hint = document.getElementById("email_hint");
                                        var flag = checkEmail(emailValue);
                                        if(flag) {
                                            return true;
                                        } else {
                                            layer.msg("邮箱格式错误！");
                                            return false;
                                        }
                                    }
                                    function checkEmail(strEmail) {      
                                        var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                                        if ( emailReg.test(strEmail) ) {
                                            return true;
                                        }
                                        else {
                                    //      alert("您输入的Email地址格式不正确！");
                                            return false;
                                        }
                                    };
                                    </script>
                                <div class="form-group" style="margin-top: 30px;">
                                    <div class="col-sm-5" >
                                      <input type="text" class="form-control" name="inputcode" id="inputcode" placeholder="验证码">
                                    </div>
                                    <input id="btnSendCode1"  type="button" onclick="send_email_checkcode(this);" class="layui-btn layui-btn-radius" style="border:1px solid #ee3843;color: #ee3843;background-color: white;" value="发送验证码"/>
                                </div>
                                <input type="checkbox" style="float: left;" name="" title="请记住我" lay-skin="primary">
                                <span style="display:block;float: left; margin-bottom:2px;height: 20px;margin-left: 5px;">请记住我</span>
                                <button type="button" onclick="logbutton()" class="layui-btn  layui-btn-lg layui-btn-radius" style="margin-top: 60px;margin-left: -20px;border:1px solid red;color: red;background-color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                            </form>
                        </div> 
                    </div>
                </div> 
            </div>
            <div class="log-log-register">
                <div style="margin-top: 200px;margin-left:50px">
                    还没有账号：
                </div>
                <div style="margin-left:50px;margin-top: 10px;">
                    <a href="registerpage.html" style="color:red; text-decoration: none;">
                        立即注册
                        <span class="glyphicon glyphicon-circle-arrow-right glyphicon-font"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="log_buttom">
        <div class="log-logo">
        </div>
        <div  class="log-buttom-icon">
            <div class="glyphicon glyphicon-film" style=" color: white;width:50px;height: 50px;font-size: 50px;margin-top: 40px;margin-left: 70px;"></div>
            <div style="margin-left: 65px;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;">极速找房</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-service" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线客户</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-date" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线预约</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-find-fill" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">地图找房</div>
        </div>
        
    </div>
    <div class="buttom_nav">
            <div class="buttom_nav_center">
                <div class="recommend-area-rent">
                    <div class="title">
                        推荐区域租房
                    </div>
                    <div class="recommend-content">
                        <span class="">
                            <a href="">吴中</a>
                            <a href="">吴江</a>
                            <a href="">园区</a>
                            <a href="">太仓</a>
                            <a href="">姑苏区</a>
                            <a href="">常说</a>
                            <a href="">平江</a>
                            <a href="">张家港</a>
                            <a href="">高新区</a>
                            <a href="">沧浪</a>
                            <a href="">相城</a>
                            <a href="">昆山</a>
                            <a href="">金阊</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
                <div class="recommend-subway-rent">
                    <div class="title">
                        推荐地铁租房
                    </div>
                    <div class="recommend-content">
                        <span class="">
                            <a href="">1号线</a>
                            <a href="">2号线</a>
                            <a href="">3号线</a>
                            <a href="">4号线支线</a>
                            <a href="">4号线</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                <div class="Recommend-type-rent">
                    <div class="title">
                        推荐类型租房
                    </div>
                    <div class="recommend-content">
                        <span>
                            <a href="">苏州合租</a>
                            <a href="">苏州整租</a>
                            <a href="">苏州公寓</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                <div id="about-suleju">
                    <div class="title" style="float: left;width: 200px;height: 300px;">
                        <div style="width: 200px;">
                            关于苏乐居
                        </div>
                        <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >伙伴登录</a>
                                <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            苏乐居合作公寓
                        </div>
                        <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >青年汇</a>
                                <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                                <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            意见回馈
                        </div>
                        <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >mail:2308844@qq.com</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            联系苏乐居
                        </div>
                        <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >10106006</a>
                                <br>
                                <br>
                                <a href="">周一～周日 8:00～23:00</a>
                              </span>
                        </div>
                    </div><br>
                    <div id="max-buttom-info">
                        <div id="suleju-web-info">
                            <div style="width:300px;margin-left:-110px">
                                ©2015 上海万间信息技术有限公司
                            </div>  
                            <a href="" style="margin-right: 25px;">
                                隐私协议 
                            </a>
                            <a href="">服务协议</a>
                            <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路88号 金蝶软件园</div>
                            <a href=""> 沪ICP备15004537号-2    </a>
                        </div>
                        <div id="suleju-web-info">
                            <div style="width: 25px;height: 23px;
                             margin-left: -130px;background-image: url(image/gongan.png);background-size: 100%;">

                            </div>
                            <a style="width:260px;margin-left:-100px">
                                沪公网安备31011502006937号  
                            </a>  
                            <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20170251</div>
                            
                        </div>
                       
                    </div>
                    
                </div>
            </div>
            
    </div>
    <script>
        //发布房源判断是否登录，否则进入登录页面
        function release(){
            let token = localStorage.getItem("token");
            if(token != null){
                window.location = "upload-house.html";
            }
            else{
                layer.msg('请先登录！', {icon: 6,anim:0});   
                setTimeout(function(){window.location.href='logpage.html';},1000);
 
            }
        }
        function send_email_checkcode(obj){
            let email = $("#inputemail").val();
            IdentifyingCode = document.getElementById(obj.id);

            $.ajax({
                type:"get",
                url: "/gewu/userLog/checkCode",
                data:{"email":email},
                success:function(res){
                    console.log(res);
                    if(res.code == 200){
                        console.log(res.content);
                        alert("验证码发送成功！");
                        document.getElementById("btnSendCode").value = "发送验证码"
                        document.getElementById("btnSendCode").removeAttribute("disabled");
                        sendMessage();
                    }
                    else if(res.code == "500"){
                        alert("邮箱不能为空！")
                    }
                    else{
                        alert("用户不存在，请注册账号！")
                    }
                }
            })
            
        }
        function logbutton(){
            let data = $("#email_log_form").serialize();
            $.ajax({
                type:"get",
                url:"/gewu/userLog/log",
                data:data,
                success:function(res){//这里有点问题
                    if (res.code == 200) {
                        console.log(res.msg)
                        localStorage.setItem("token",res.content);
                        alert("登录成功！")
                        window.location = "frontpage.html";
                    }
                    else if (res.code == "502") {
                        alert("验证码不正确!")
                    }
                    else {
                        alert("用户不存在，请注册账号！")
                    }
                }
            })
        }

        //薛培钊
         //  手机验证       
        function send_phone_checkcode(obj) {
            let phone = $("#inputphone").val();
            IdentifyingCode = document.getElementById(obj.id);

            $.ajax({
                type: "get",
                url: "/gewu/userLog/checkphone",
                data: { "phone": phone },
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        console.log(res.content)
                        alert("验证码发送成功！")
                        document.getElementById("btnSendCode1").value = "发送验证码";
                        document.getElementById("btnSendCode1").removeAttribute("disabled");
                        sendMessage();
                    }
                    else if (res.code == "500") {
                        alert("手机号不能为空！")
                    }
                    else {
                        alert("用户不存在，请注册账号！")
                    }
                }
            })

        }
           // 手机登陆
           function phonelogbutton() {
                let data = $("#phone_log_form").serialize();
                $.ajax({
                    type: "get",
                    url: "/gewu/userLog/phone_log",
                    data: data,
                    success: function (res) {
                         if (res.code == 200) {
                            console.log(res.msg);
                            alert("登录成功！");
                            localStorage.setItem("token",res.content);
                            window.location = "frontpage.html";
                        }
                        else if (res.code == "500") {
                            alert("账户或密码不能为空")
                        }
                        else if (res.code == "502") {
                            alert("验证码不正确!")
                        }
                        else {
                            alert("你还没有注册，请先注册！")
                        }
                    }
                })
            }

        //  账号登陆          
           function accountbutton() {
                    let account = $("#form_account").serialize();
                    $.ajax({
                        type: "get",
                        url: "/gewu/userLog/checkAccount",
                        data: account,
                        success: function (res) {
                            if (res.code == 200) {
                                console.log(res.msg)
                                 alert("登录成功！")
                                 localStorage.setItem("token",res.content);
                                 window.location = "frontpage.html";
                            }
                            else if (res.code == "500") {
                                alert("账户或密码不能为空")
                            }
                             else if (res.code == "400") {
                                alert("账户或密码错误")
                            }
                            else {
                                alert("用户不存在，请注册账号！")
                            }
                          
                        }
                    })
            }

            let IdentifyingCode;
			var InterValObj; //timer变量，控制时间
			var count = 60; //间隔函数，1秒执行
			var curCount;//当前剩余秒数
			//发送短信验证码
			function sendMessage() {
                curCount = count;
                // 设置button效果，开始计时
                IdentifyingCode.setAttribute("disabled","true" );//设置按钮为禁用状态
                IdentifyingCode.value=curCount + "秒后重获";//更改按钮文字
                InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
			}
			//timer处理函数
			function SetRemainTime() {
				if (curCount == 0) {//超时重新获取验证码                
					window.clearInterval(InterValObj);// 停止计时器
					IdentifyingCode.removeAttribute("disabled");//移除禁用状态改为可用
					IdentifyingCode.value="重获验证码";
				}else {
					curCount--;
					IdentifyingCode.value=curCount + "秒后重获";
				}
			}
    </script>
</body>
</html>